<template>
	<!-- 个人资料 -->
	<view class="container">
		<view class="user-list flex items-center justify-between">
			<text class="list-name">头像</text>
			<view class="flex items-center" @click="onChangeAvatar">
				<up-image width="34" height="34" class="avatar" :src="userInfo.header" shape="circle"></up-image>
				<image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
			</view>
		</view>
		<view class="user-list flex items-center justify-between">
			<text class="list-name">姓名</text>
			<view class="flex">
				<input class="list-val" v-model="userInfo.name" placeholder="请输入昵称~" maxlength="50"
					placeholder-style="color:#c8c9cc;fontSize:28rpx" />
			</view>
		</view>
		<view class="user-list flex items-center justify-between" @click="showSex = true">
			<text class="list-name">性别</text>
			<view class="flex">
				<text class="list-val">{{ SexValue(userInfo.sex) || "请选择性别~" }}</text>
			</view>
		</view>

		<view class="user-list flex items-center justify-between">
			<text class="list-name">角色</text>
			<view class="flex">
				<text class="list-val">{{ RoleValue(userInfo.role) }}</text>
			</view>
		</view>

		<view class="user-list flex items-center justify-between">
			<text class="list-name">手机号</text>
			<view class="flex">
				<text class="list-val">{{ userInfo.mobile }}</text>
			</view>
		</view>
		<view class="tips">（角色、手机号不能修改）</view>

		<view class="button-box px-48" >
			<view class="exit-login bg2" @click="onSubmit" :disabled="loading">
				<up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>保存</text></view>
		</view>

		<up-picker :show="showSex" :columns="genderRadioMap" :keyName="'label'" @cancel="showSex = false"
			@confirm="changeSex"></up-picker>

	</view>
</template>

<script setup>
import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
import { IMG_URL2 } from "@/config";
import { studyApi } from "@/api";
import { BASE_API } from "@/config";

const state = reactive({
	model: {},
	rules: {},
});

const showSex = ref(false);
const loading = ref(false);



const genderRadioMap = ref([[
	{
		label: '男',
		value: '1',
	},
	{
		label: '女',
		value: '2',
	},
	{
		label: '未知',
		value: '0',
	},
]])

//   const userInfo = computed(() => superant.$store('user').userInfo);
const userInfo = reactive({
	id: 1,
	name: '123',
	mobile: '123',
	sex: '男',
	role: '1',
	header:'',
})

function SexValue(val) {
	// if (val) {
	// 	return genderRadioMap.value[0].find(item => item.value == val).label
	// }

	if (val==1) {
		return '男'
	}else if (val == 2){
		return '女'
	}else if (val == 0) {
		return '未知'
	}else{
		return ''
	}
}
function RoleValue(val) {
	if (val==0) {
		return '店长'
	}else if (val == 1){
		return '店员'
	}else if (val == 2) {
		return '专营商'
	}
}
// 选择性别
function changeSex(e) {
	console.log(e.value[0].value);
	userInfo.sex = e.value[0].value
	showSex.value = false;
}


function onChooseAvatar(e) {
	const tempUrl = e.detail.avatarUrl || '';
	uploadAvatar(tempUrl);
}

//修改头像
function onChangeAvatar() {
	uni.chooseImage({
		success: async (chooseImageRes) => {
			const filePath = chooseImageRes.tempFilePaths[0];
			// 将图片转成二进制数据
			var fileData = wx.getFileSystemManager().readFileSync(filePath);

			// 将二进制数据上传到服务器
			wx.uploadFile({
				url:  BASE_API + '/bg/file/upload',   // 上传的 URL 地址
				filePath: filePath,   // 文件的临时路径
				name: 'file',   // 服务器端接收文件的字段名
				header: {
					'content-type': 'multipart/form-data'   // 设置请求头
				},
				formData: {},
				success: function(res) {
					// 上传成功后的操作
					console.log(JSON.parse(res.data));
					userInfo.header=JSON.parse(res.data).result.url
				},
				fail: function(res) {
					// 上传失败后的操作
					console.log(res);
				}
			});
		},
	});
}

async function uploadAvatar(tempUrl) {
	if (!tempUrl) return;
	// state.model.avatar = path;
}

// 保存信息
async function onSubmit() {
	if (userInfo.sex == "") {
		uni.showToast({
			title: "请选择性别",
			icon: "none",
			mask: true
		});
		return;
	}
	if (userInfo.name.trim() == "") {
		uni.showToast({
			title: "请输入姓名",
			icon: "none",
			mask: true
		});
		return;
	}
	loading.value = true;
	studyApi.FRONTSTAFFSAVESTAFFINFO(userInfo).then((res) => {
		loading.value = false;
		if(res.code==200){
			uni.showToast({
				title: res.errMsg,
				icon: "none",
			});
			setTimeout(() => {
			    uni.switchTab({ url: `/pages/index/user` });
			},1500)
		}else{
			uni.showToast({
				title: res.errMsg,
				icon: "none",
			});
		}
	})
}

const getUserInfo = async () => {
	studyApi.FRONTSTAFFGETSTAFFDETAIL().then((res) => {
		if(res.code==200){
			userInfo.header=res.result.header
			userInfo.mobile=res.result.mobile
			userInfo.name=res.result.name
			userInfo.role=res.result.role
			userInfo.sex=res.result.sex
			
		}
	})
};
onShow((options) => {
	getUserInfo();
})
</script>

<style lang="scss" scoped>
// 基本信息
.container {
	.info-head {
		.info-title {
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		.save-btn {
			color: #fff;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			width: 100rpx;
			border-radius: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}

		.dis-btn {
			opacity: 0.5;
		}
	}


	// 个人信息项
	.user-list {
		background: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 20rpx;
		box-sizing: border-box;
		.list-name {
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.6);
		}

		.avatar {
			width: 67rpx;
			height: 67rpx;
			border-radius: 50%;
		}

		.list-val {
			color: #999;
			font-size: 28rpx;
			text-align: right;
		}
		.chevronright{
			width: 32rpx;
			height: 32rpx;
			margin-left: 10rpx;
		}
		
	}

	.button-box {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		z-index: 9;
		background-color: #fff;
	}

	.exit-login {
		width: 654rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #D68E44;
		color: #ffffff;
		text-align: center;
		border-radius: 64px;
		font-size: 32rpx;
		margin-bottom: 40rpx;
		display: flex;
    justify-content: center;
	}

	.exit-login:after {
		border: none;
	}

	.tips {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		text-align: right;
		text-underline-position: from-font;
		text-decoration-skip-ink: none;
		color: rgba(145, 74, 0, 1);
		padding:24rpx;
		box-sizing: border-box;
	}
}
</style>
